<template>
  <j-modal title="专职人员列表" :width="1000" :visible="visible" :confirmLoading="loading" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-row type="flex" style="flex-flow: inherit;">
      <a-col :flex="toggle ? '220px' : '30px'" style="margin-right: 12px;background-color: #fff;">
        <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      </a-col>
      <a-col flex="auto">
        <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
            <a-row type="flex" justify="space-around">
              <a-col>
                <a-form-model-item label="姓名" >
                  <a-input v-model="pageFilter.personnelName" placeholder="请输入姓名"/>
                </a-form-model-item>
              </a-col>
              <a-col>
                <a-form-model-item label="联系电话" >
                  <a-input v-model="pageFilter.phone" placeholder="请输入联系电话"/>
                </a-form-model-item>
              </a-col>
              
              <a-col>
                <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                  <a-button type="primary" @click="onQuery"> 查询 </a-button>
                  <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-card>
        <a-card :bordered="false">
          <!-- 表格展示 -->
          <div class="table-page-content">
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @change="onTableChange" selectionType="radio" @selectedRow="selectedRow">
              <!-- <template slot="radio" >
                <a-radio></a-radio>
              </template> -->
            </z-table>
          </div>
      </a-card>
      </a-col>
  </a-row>
  </j-modal>
</template>

<script>
  import DepartTree from '@/views/sjsk/modules/departTree'
  import {administrotorsList,getDivisionAdmin} from '@api/sjsk/specialist'
  export default {
    components: { DepartTree},
    data() {
      return {
        visible: false,
        loading: false, 
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        form: {},
        toggle: true,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
          division: "",
        },
        pageData:[],
        columns:[
        // {
        //   // width:50,
        //   title:'',
        //   dataIndex: 'radio',
        //   align: 'center',
        //   scopedSlots: { customRender: 'radio' },
        //   // :style="{ borderBottom: '1px solid #E9E9E9' }"
        // },
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          // width:50,
          title: '姓名',
          dataIndex: 'personnelName',
          align: 'center',
        },
        {
          // width:50,
          title: '所属单位',
          dataIndex: 'region',
          align: 'center',
        },
        {
          // width:50,
          title: '电话',
          dataIndex: 'phone',
          align: 'center',
        },
      ],
      }
    },
    async created() {
    },
    methods: {
      selectedRow(val){
        console.log(val);
      },
       // 选中组织架构树，赋值到人员列表搜索框
    getTreeData(datas, id) {
      if (id != undefined && id != null && id != "") {
        this.division = id
        this.$set(this.pageFilter, 'division', id)
        this.onQuery1()
      }
      else{
        this.onQuery()
        this.division = ''
      }
    },
    toggleBool(bool) {
      this.toggle = bool
    },
    show(record) {
        this.visible = true
        this.onQuery()
      },
    handleCancel() {
        this.visible = false
      },
    handleOk() {
        this.visible = false
      },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onQuery1() {
      this.pageFilter.pageNo = 1
      this.refreshTable1()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        division: this.division
      }
      // this.actualDetectTime = []
      if(this.pageFilter.division){this.refreshTable1()}
      else{this.refreshTable()}
    },
    refreshTable(){
      delete this.pageFilter.division
      administrotorsList(this.pageFilter)
          .then(res => {
            if (res.success) {
              // console.log(res);
              this.pageData = res.result
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    },
    refreshTable1(){
      getDivisionAdmin(this.pageFilter)
          .then(res => {
            if (res.success) {
              // console.log(res);
              this.pageData = res.result
            } else {
              this.loading = false
            }
          })
          .catch(e => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      if(this.division){this.refreshTable1()}
      else{this.refreshTable()}
      console.log(this.division);
    },
    },
  }
  </script>
  <style lang="less" scoped>
  .pt {
    font-weight: bold;
  }
  
  .pl {
    padding-top: 20px;
    border-top: 1px dotted #ccc;
  }
  
  .ant-row {
    margin-left: 10px;
  }
  
  .item1 {
    width: 100%;
    position: relative;
    left: -2%;
  
    /deep/.ant-col-6 {
      width: 10.5%;
      // text-align: left;
    }
  
    /deep/.ant-col-16 {
      width: 70%;
      text-align: left;
    }
  }
  
  .item2 {
    margin-left: 115px;
    margin-bottom: 20px;
  
    p {
      display: inline-block;
    }
  
    .box {
      display: inline-block;
      margin-left: 90px;
      margin-right: 20px;
    }
  }
  </style>